<template>
	<view>
		<view class="setting-row">
			<view class="label">
				<text>✳ 画面描述</text>
			</view>
			<view class="values">
				<prompt type="mj" ref="prompt"></prompt>
			</view>
		</view>
		<view class="setting-row">
			<view class="label">
				<text>✳ 画布比例</text>
				<view class="help" @tap="showHelp" data-text="指定生成图像的宽高比">
					<image src="/static/images/ic_help.png"></image>
				</view>
			</view>
			<view class="values">
				<view class="size-list">
					<view class="size-item" :class="{active: options.ar === '1:1'}" @tap="changeSize" data-value="1:1">
						<view class="size-block" style="width: 64rpx; height: 64rpx;"></view>
						<text>1:1</text>
					</view>
					<view class="size-item" :class="{active: options.ar === '16:9'}" @tap="changeSize"
						data-value="16:9">
						<view class="size-block" style="width: 64rpx; height: 36rpx;"></view>
						<text>16:9</text>
					</view>
					<view class="size-item" :class="{active: options.ar === '9:16'}" @tap="changeSize"
						data-value="9:16">
						<view class="size-block" style="width: 36rpx; height: 64rpx;"></view>
						<text>9:16</text>
					</view>
					<view class="size-item" :class="{active: options.ar === '3:2'}" @tap="changeSize" data-value="3:2">
						<view class="size-block" style="width: 64rpx; height: 42rpx;"></view>
						<text>3:2</text>
					</view>
					<view class="size-item" :class="{active: options.ar === '4:3'}" @tap="changeSize" data-value="4:3">
						<view class="size-block" style="width: 64rpx; height: 48rpx;"></view>
						<text>4:3</text>
					</view>
					<view class="size-item" :class="{active: options.ar === '3:4'}" @tap="changeSize" data-value="3:4">
						<view class="size-block" style="width: 48rpx; height: 64rpx;"></view>
						<text>3:4</text>
					</view>
				</view>
			</view>
		</view>
		<view class="setting-row">
			<view class="label">
				<text>✳ 参考图 & 权重 --iw</text>
				<view class="help" @tap="showHelp" data-text="参考图尺寸限1500x1500像素以内; 权重值越大越像参考图，取值范围0.5-2， 默认1">
					<image src="/static/images/ic_help.png"></image>
				</view>
			</view>
			<view class="values">
				<view style="display: flex; align-items: center; padding: 0 10rpx;">
					<view class="uploader">
						<uv-upload name="image" :fileList="imageList" :maxCount="1" :deletable="true" :previewFullImage="true" width="120rpx" height="120rpx" @afterRead="uploadAfterRead" @delete="uploadDelete"></uv-upload>
					</view>
					<view class="slider">
						<slider v-model="options.iw" :min="5" :max="20" activeColor="#04BABE" block-size="26" data-name="iw" @changing="onSlideChange" style="width: 326rpx;"></slider>
						<text>{{options.iw / 10}}</text>
					</view>
				</view>
			</view>
		</view>

		<view class="setting-row">
			<view class="label">
				<text>✳ 图片质量 --q</text>
				<view class="help" @tap="showHelp" data-text="设置图片的质量，越大质量越高，取值范围0.3-5，默认值1">
					<image src="/static/images/ic_help.png"></image>
				</view>
			</view>
			<view class="values">
				<view class="slider">
					<slider v-model="options.q" :min="3" :max="50" activeColor="#04BABE" block-size="26" data-name="q"
						@changing="onSlideChange"></slider>
					<text>{{options.q / 10}}</text>
				</view>
			</view>
		</view>
		<view class="setting-row">
			<view class="label">
				<text>✳ 风格化值 --s</text>
				<view class="help" @tap="showHelp" data-text="设置生成图片时的风格化程度，值越大，风格化的程度越高，取值范围0-1000，默认值100">
					<image src="/static/images/ic_help.png"></image>
				</view>
			</view>
			<view class="values">
				<view class="slider">
					<slider v-model="options.s" :min="0" :max="1000" activeColor="#04BABE" block-size="26" data-name="s"
						@changing="onSlideChange"></slider>
					<text>{{options.s}}</text>
				</view>
			</view>
		</view>
		<view class="setting-row">
			<view class="label">
				<text>✳ 混乱值 --c</text>
				<view class="help" @tap="showHelp"
					data-text="本参数会控制生成4张图的差别， 值越大，生成4张图的区别越大，值越小,生成的4张图越接近，取值范围0-100， 默认值0">
					<image src="/static/images/ic_help.png"></image>
				</view>
			</view>
			<view class="values">
				<view class="slider">
					<slider v-model="options.c" :min="0" :max="100" activeColor="#04BABE" block-size="26" data-name="c"
						@changing="onSlideChange"></slider>
					<text>{{options.c}}</text>
				</view>
			</view>
		</view>
		<view class="setting-row">
			<view class="label">
				<text>✳ 排除内容 --no</text>
				<view class="help" @tap="showHelp" data-text="指定图片内要排除的生成内容">
					<image src="/static/images/ic_help.png"></image>
				</view>
			</view>
			<view class="values">
				<input type="text" class="input" v-model="options.no" placeholder="请输入排除的内容"></input>
			</view>
		</view>
		<view class="setting-row">
			<view class="label">
				<text>✳ 种子 --seed</text>
				<view class="help" @tap="showHelp" data-text="种子用于指定生成效果，可以用于生成套图，保障生成的一系列图片保持同一种风格">
					<image src="/static/images/ic_help.png"></image>
				</view>
			</view>
			<view class="values">
				<input type="text" class="input" v-model="options.seed" placeholder="请输入seed种子编号"></input>
			</view>
		</view>
		<view class="setting-row">
			<view class="label">
				<text>✳ niji渲染模型 --niji</text>
				<view class="help" @tap="showHelp" data-text="niji是动漫模型">
					<image src="/static/images/ic_help.png"></image>
				</view>
			</view>
			<view class="values">
				<foxRadio name="niji"
					:lists="[{title: '默认', value: ''},{title: 'niji6', value: '6'},{title: 'niji5', value: '5'},{title: 'niji4', value: '4'}]"
					:checked="options.niji" @change="onRadioChange"></foxRadio>
			</view>
		</view>
		<view class="setting-row">
			<view class="label">
				<text>✳ 风格 --style</text>
				<view class="help" @tap="showHelp" data-text="指定midjourney的风格，一般用于设置niji风格">
					<image src="/static/images/ic_help.png"></image>
				</view>
			</view>
			<view class="values">
				<foxRadio name="style" :lists="[{title: '默认', value: ''},{title: 'expressive-3d', value: 'expressive'},{title: 'cute', value: 'cute'},{title: 'raw', value: 'raw'}]" :checked="options.style" @change="onRadioChange"></foxRadio>
			</view>
		</view>
		<view class="setting-row">
			<view class="label">
				<text>✳ MJ渲染模型 --v</text>
				<view class="help" @tap="showHelp" data-text="指定midjourney的渲染模型">
					<image src="/static/images/ic_help.png"></image>
				</view>
			</view>
			<view class="values">
				<foxRadio name="v" :lists="[{title: '默认', value: ''},{title: 'v6', value: '6.0'},{title: 'v5.2', value: '5.2'},{title: 'v5.1', value: '5.1'},{title: 'v5', value: '5'}]" :checked="options.v" @change="onRadioChange"></foxRadio>
			</view>
		</view>
		<view class="setting-row">
			<view class="label">
				<text>✳ MJ拼贴图模式 --tile</text>
				<view class="help" @tap="showHelp" data-text="用于生成无限拼贴图">
					<image src="/static/images/ic_help.png"></image>
				</view>
			</view>
			<view class="values">
				<foxRadio name="tile" :lists="[{title: '不开启', value: 0},{title: '开启', value: 1}]" :checked="options.tile" @change="onRadioChange"></foxRadio>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp()
	import prompt from './prompt'
	export default {
		components: {
			prompt
		},
		data() {
			return {
				defaultOptions: {
					ar: '1:1',
					iw: 10,
					s: 100,
					q: 10,
					c: 0,
					no: '',
					seed: '',
					niji: '',
					style: '',
					v: '',
					tile: 0,
					image: '',
					words: []
				},
				options: {},
				imageList: []
			}
		},
		created() {
			this.options = JSON.parse(JSON.stringify(this.defaultOptions))
		},
		methods: {
			onRadioChange(e) {
				let name = e.name
				let value = e.value
				this.$set(this.options, name, value)
			},
			onSlideChange(e) {
				const name = e.currentTarget.dataset.name
				const value = e.detail.value
				this.$set(this.options, name, value)
			},
			showHelp(e) {
				const text = e.currentTarget.dataset.text
				if (text) {
					app.globalData.util.message(text)
				}
			},
			changeSize(e) {
				const value = e.currentTarget.dataset.value
				this.$set(this.options, 'ar', value)
			},
			// 删除图片
			uploadDelete(event) {
				this.imageList = []
				this.options.image = ''
			},
			// 上传图片
			uploadAfterRead(event) {
				let file = event.file
				this.imageList = [{
					...file,
					status: 'uploading',
					message: '上传中'
				}]
				app.globalData.util.upload({
					url: '/upload/image',
					filePath: file.url,
					loading: false
				}).then(res => {
					this.imageList = [{
						status: 'success',
						message: '',
						url: res.data.path
					}]
					this.options.image = res.data.path
				}).catch(err => {
					this.imageList = [{
						...file,
						status: 'failed',
						message: '上传失败'
					}]
					this.options.image = ''
				})
			},
			getDrawOptions() {
				const options = JSON.parse(JSON.stringify(this.options))
				options.words = this.$refs['prompt'].getWordsPicked()
				if (options.iw) {
					options.iw = options.iw / 10;
				}
				if (options.q) {
					options.q = options.q / 10
				}
				return options
			},
			clearDrawOptions() {
				this.options.image = ''
				this.options.no = ''
				this.options.seed = ''
				this.$refs.prompt.clearPicked()
			},
			setDrawOptions(options) {
				if (options.iw) {
					options.iw = options.iw * 10
				}
				if (options.q) {
					options.q = options.q * 10
				}
				options = Object.assign(this.defaultOptions, options)
				this.options = JSON.parse(JSON.stringify(options))
				if (options.words) {
					this.$refs.prompt.setWords(options.words)
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.setting-row {
		width: 100%;
		margin-bottom: 20rpx;
		background: #f7f7f8;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		border-radius: 20rpx;

		.label {
			width: 100%;
			font-size: 32rpx;
			line-height: 64rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.help {
				width: 64rpx;
				height: 64rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 32rpx;
					height: 32rpx;
				}
			}
		}

		.values {
			width: 100%;
			padding: 20rpx 0;
			box-sizing: border-box;

			.slider {
				display: flex;
				align-items: center;

				slider {
					width: 460rpx;
				}

				text {
					margin-left: 20rpx;
					color: #666;
				}
			}

			.uploader {
				width: 120rpx;
				height: 120rpx;
				border-radius: 10rpx;
				overflow: hidden;
				border: 1px dotted #ccc;
			}

			.input {
				background: #fff;
				padding: 20rpx 20rpx;
				font-size: 28rpx;
				border-radius: 8rpx;
				;
			}

			.size-list {
				display: flex;
				align-items: center;
				justify-content: space-around;
				width: 100%;

				.size-item {
					display: block;
					border-radius: 8rpx;
					position: relative;
					width: 86rpx;
					height: 140rpx;
					padding: 10rpx;
					border: 1px solid #ddd;
					box-sizing: border-box;
					text-align: center;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: space-between;

					.size-block {
						background: #ddd;
						border-radius: 8rpx;
					}

					text {
						color: #333;
						font-size: 28rpx;
						text-align: center;
					}

					&.active {
						border-color: #04BABE;

						.size-block {
							background-color: #04BABE;
						}
					}
				}
			}
		}
	}
</style>